<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Flotr: Negative Values Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<style type="text/css">
			.flotr-legend{
				border: 2px solid #B6D9FF;
			}			
		</style>
		<script type="text/javascript" src="../lib/yepnope.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" class="graph" style="width:600px;height:300px;"></div>
			
			<h2>Example</h2>
			<p>This example shows a graph with negative values. There are three series, but the legend
			shows only two. This is because I didn't supply a <code>label</code> property in the d1 series.
			Read more about <a href="http://www.solutoire.com/flotr/docs/legend/" title="Configure And Style Flotr Legends">Flotr legends</a>.</p>
			
			<ul>
				<li>The first series is just a line through y = 0.</li>
				<li>The second series contains random data presented as a scatter plot.</li>
				<li>The third series draws the regression line.</li>				
			</ul>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
		<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
		function example(){

            var container = document.getElementById('container');

			/**
			 * Fill series d0, d1 and d2. 
			 * 
			 * The first series is just a line through y = 0.
			 * The second series will contain random data presented as a scatter plot. 
			 * The third series draws the regression line. 
			 * 
			 * Please don't be distracted by the math.
			 */
			var d0 = [];
			var d1 = [];
			var d2 = [];
							
			var n, x, y, sx = 0, sy = 0, sxy = 0, sxsq = 0;
			for(n = 0; n < 20; n++){
				x = n;
				y = x + Math.random()*8 - 15;
				d0.push([x, 0]);
		        d1.push([x, y]);
				
				/**
				 * Do some math, we need these later to compute the regression line.
				 */
				sx += x;
				sy += y;
				sxy += x*y;
				sxsq += Math.pow(x,2);
			}
		
			var xmean = sx/n;
			var ymean = sy/n;
			var beta = ((n*sxy) - (sx*sy))/((n*sxsq)-(Math.pow(sx,2)));
			var alpha = ymean - (beta * xmean);
			
			/**
			 * Compute the regression line.
			 */
			for(var i = 0; i < 20; i++){
				d2.push([i, alpha + beta*i])
			}			
					    
			/**
			 * Draw the graph.
			 */
		    var f = Flotr.draw(
				container, [ 
					{data:d0, shadowSize:0, color:'#545454'}, // => Horizontal line through y = 0
					{data:d1, label:'y = x + (Math.random() * 8) - 15', points:{ show:true } },	// => Scatterplot
					{data:d2, label:'y = '+alpha.toFixed(2)+' + ' + beta.toFixed(2) + '*x'}	// => Regression line																
				],
				{
					legend:{position:'se',backgroundColor: '#D2E8FF'}
				}
			);
		};
		</script>
		
		<!-- analytics -->
		
	</body>
	<script type="text/javascript" src="includes.js"></script>
</html>
